<template>
  <div class="zil">
    <!--标题-->
    <div class="data">
      <img @click="returns()" src="../../../assets/2.svg"/>
      <h3>我的资料</h3>
      <div>保存</div>
    </div>
    <!--头像-->
    <div class="data1">
      <div class="toux">
        <div class="toux1">
          <input
            type="file"
            id="upload"
            style="display: none"
            accept="image/gif,image/jpeg,image/png,image/jpg"
            @change="freshImg"
          />
          <div class="border" @click="uploadIMg">
            <img :src="imgsrc" />{{ headTip }}
          </div>
        </div>
        <div class="buju">
          <div class="toux2">
            <span>地对地导弹<img src="../../../assets/5.jpg" /></span>
          </div>
          <div class="toux3">
            <h4>ID号:198438</h4>
          </div>
        </div>
      </div>
    </div>
    <!--个人介绍-->
    <div class="introduce">
      <div class="introduce1">
        <h3>个人介绍</h3>
        <textarea
          v-model="title"
          maxlength="500"
          @input="monitorInput"
          name="text"
          placeholder="sadasfasfafacsacascascasczXZxZX"
        ></textarea>
      </div>
    </div>
    <!--资料更改-->
    <div class="data2">
      <ul class="data2-ul">
        <li>
          <div class="data2-div">
            <span class="data2-span">性别</span>
            <div @click="sexVisible = true">{{ sex }}</div>
            <mt-popup v-model="sexVisible" position="bottom">
              <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
            </mt-popup>
          </div>
        </li>
        <li>
          <div class="data2-div">
            <span class="data2-span">年龄</span>
            <div><input value="20" /></div>
          </div>
        </li>
        <li>
          <div class="data2-div">
            <span class="data2-span">身高</span>
            <div><input value="180CM" /></div>
          </div>
        </li>
        <li>
          <div class="data2-div">
            <span class="data2-span">学历</span>
            <div @click="sexVisible1 = true">{{ education }}</div>
            <mt-popup v-model="sexVisible1" position="bottom">
              <mt-picker :slots="slots1" @change="onValuesChange1"></mt-picker>
            </mt-popup>
          </div>
        </li>
        <li>
          <div class="data2-div">
            <span class="data2-span">月收入</span>
            <div><input value="8000" /></div>
          </div>
        </li>
        <li>
          <div class="data2-div">
            <span class="data2-span">婚姻情况</span>
            <div @click="sexVisible2 = true">{{ marriage }}</div>
            <mt-popup v-model="sexVisible2" position="bottom">
              <mt-picker :slots="slots2" @change="onValuesChange2"></mt-picker>
            </mt-popup>
          </div>
        </li>
        <li>
          <div class="data2-div">
            <span class="data2-span">所在地区</span>
            <div @click="sexVisible3 = true">{{ region }}</div>
            <mt-popup v-model="sexVisible3" position="bottom">
              <mt-picker :slots="slots3" @change="onValuesChange3"></mt-picker>
            </mt-popup>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'release2',
  data () {
    return {
      title: '',
      num: 500,
      imgsrc: require('../../../assets/1.jpg'), // 用户没有上传图片的默认头像
      headTip: '',
      // 性别选择
      sexVisible: false,
      sex: '',
      slots: [
        {
          flex: 1,
          values: ['男', '女'],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      // 学历选择
      education: '',
      sexVisible1: false,
      slots1: [
        {
          flex: 1,
          values: ['专科', '本科', '研究生', '硕士', '博士', '博士后'],
          className: 'slot1',
          textAlign1: 'center'
        }
      ],
      // 婚姻选择
      marriage: '',
      sexVisible2: false,
      slots2: [
        {
          flex: 1,
          values: ['未婚', '已婚'],
          className: 'slot1',
          textAlign2: 'center'
        }
      ],
      // 地区选择
      region: '',
      sexVisible3: false,
      slots3: [
        {
          flex: 1,
          values: ['广西', '广东', '北京', '江苏', '安徽', '四川'],
          className: 'slot1',
          textAlign2: 'center'
        }
      ]
    }
  },
  methods: {
    monitorInput () {
      var txtval = this.title.length
      this.num = 500 - txtval
    },
    uploadIMg: function () {
      document.getElementById('upload').click()
    },
    freshImg: function (e) {
      const _this = this
      _this.imgObj = e.target.files['0'] // 得到上传的第一个文件
      const fr = new FileReader() // 异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
      fr.onload = function () {
        // 在读取操作完成时触发
        _this.imgsrc = fr.result // 图片文件赋值给图片标签路径
      }
      fr.readAsDataURL(_this.imgObj) // 将读取到的文件编码成Data URL
      _this.headTip = '' // 清空我的提示
    },
    // 性别选择
    onValuesChange (picker, values) {
      this.sex = values[0]
      this.sexVisible = false
    },
    // 学历选择
    onValuesChange1 (picker, values) {
      this.education = values[0]
      this.sexVisible1 = false
    },
    // 婚姻选择
    onValuesChange2 (picker, values) {
      this.marriage = values[0]
      this.sexVisible2 = false
    },
    // 地区选择
    onValuesChange3 (picker, values) {
      this.region = values[0]
      this.sexVisible3 = false
    },
    returns(){
      this.$router.back()
    }
  }
}
</script>
<style>
body {
  margin: 0;
}
.zil {
  height: 100vh;
  text-align: center;
}
/*标题*/
.data {
  height: 55px;
  line-height: 55px;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
}
.data img {
  width: 20px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}
.data h3 {
  font-weight: normal;
  flex: 6;
}
.data div {
  flex: 1;
  line-height: 60px;
  color: #797979;
}
/*头像*/
.data1 {
  height: 110px;
}
.toux {
  display: flex;
}
.data1 .toux1 {
  width: 80px;
  height: 80px;
  border: 1px solid #4d4c4c;
  border-radius: 50%;
  margin: 10px 20px 0 20px;
}
.data1 .toux1 img {
  width: 81px;
  height: 81px;
  border-radius: 50%;
}
.data1 .toux2 img {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  object-fit: contain;
}
.buju {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-top: 30px;
}
/*个人介绍*/
.introduce {
  height: 100px;
  background-color: #d8d6d6;
}
.introduce1 {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 20px;
}
.introduce1 h3 {
  flex: 1;
  margin: 10px 0;
}
.introduce1 textarea {
  width: 90%;
  height: 50px;
  background-color: #d8d6d6;
  border: none;
}
/*资料更改*/
.data2-ul {
  list-style: none;
}
.data2 .data2-ul li {
  height: 55px;
  line-height: 55px;
  border-bottom: 1px solid #ccc;
}
.data2-div {
  font-size: 1rem;
  display: flex;
}
.data2-span {
  flex: 1;
  text-align: left;
  margin-left: 20px;
}
.data2-div div {
  flex: 3;
  text-align: left;
}
.data2-div div input {
  height: 50px;
  font-size: 1rem;
  border: none;
}
.mint-popup-bottom {
  width: 100%;
}
.data2-div div .picker-item {
  text-align: center;
}
.picker-slot.picker-slot-center {
  box-sizing: border-box;
  overflow-y: scroll;
}
</style>
